import React, { useState } from 'react';
import CommonTag from '@/components/CommonTag';
import IconFont from '@/components/IconFont';
import OperaBtnRender from '@/components/OperaBtnRender';
import TableRender from '@/components/TableRender';
import { platformType } from '@/utils/config';
import { Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { updateStatus } from '../service';

const { confirm } = Modal;

export default ({ data, headerHeight, pages, setPages, type, rowKey, setRowKey, refresh }) => {

  const [selectedRowData, setSelectedRowData] = useState([]);

  //操作物流回传状态，取消或者上传
  const handleStatus = async val => {
    START_LOADING();
    const params = {
      operationType: val,
      ids: selectedRowData.map(v => v.id)
    }
    const { success } = await updateStatus(params);
    END_LOADING();
    if (success) {
      message.success('操作成功');
      refresh();
    }
  }

  // 重新上传点击事件
  const againClick = () => {
    if (rowKey.length <= 0) {
      message.info('请勾选订单,再重新上传');
      return;
    }
    confirm({
      title: '提示',
      icon: <ExclamationCircleOutlined />,
      content: '确定重新上传吗？',
      async onOk() {
        handleStatus(0);
      },
      onCancel() { },
    });
  };

  // 取消上传点击事件
  const cancelClick = () => {
    if (rowKey.length <= 0) {
      message.info('请勾选订单,再重新上传');
      return;
    }
    confirm({
      title: '提示',
      icon: <ExclamationCircleOutlined />,
      content: '确定取消上传吗？',
      async onOk() {
        handleStatus(3);
      },
      onCancel() { },
    });
  };

  const columns = [
    {
      title: '序号',
      code: 'name',
      width: 60,
      fixed: 'left',
      render: (t, r, i) => i + 1,
    },
    {
      title: '系统订单号',
      code: 'orderSn',
      width: 160,
      filters: [
        {
          text: '已合并订单',
          value: '2',
        },
        {
          text: '已拆单订单',
          value: '1',
        },
        {
          text: '正常订单',
          value: '0',
        },
      ],
      render: (t, r, i) => (
        <>
          <span>{r.orderSn}</span> <br />
          {r.splitState == 1 ? <CommonTag type="chaifenpop" /> : null}
          {r.splitState == 2 ? <CommonTag type="hebingpop" /> : null}
        </>
      ),
    },
    {
      title: '店铺订单号',
      code: 'outOrderSn',
      width: 150,
      render: (t, r, i) => (
        <>
          {r.orderChannel == 13 || r.orderChannel == 14 ? (
            <div>
              <CommonTag
                type={platformType[r.orderChannel]}
                qmType={r.qmChannel}
              />
            </div>
          ) : (
            <div>
              {platformType[r.orderChannel] ? (
                <IconFont
                  type={`icon${platformType[r.orderChannel]}`}
                  style={{ fontSize: '24px' }}
                />
              ) : (
                ''
              )}
            </div>
          )}
          <span>{r.ecStoreName}</span> <br />
          <span>{r.outOrderSn}</span>
          {r.payFlag == 2 ? <CommonTag type="daofupop" /> : null}
        </>
      ),
    },
    // {
    //   title: '发货渠道与快递',
    //   code: 'warehouseId',
    //   key: 'warehouseId',
    //   width: 150,
    //   render: (t, r, i) => (
    //     <>
    //       <span>{r.channelName}</span> <br />
    //       <span>{r.logisticsCompany}</span> <br />
    //       <Paragraph copyable={true} style={{ marginBottom: 0 }}>
    //         {r.logisticsNo || ''}
    //       </Paragraph>
    //     </>
    //   ),
    // },
    {
      title: '平台付款时间',
      code: 'ecPayTime',
      width: 170,
    },
    {
      title: '订单类型',
      code: 'orderType',
      width: 100,
      render: (_, record) => (record.orderType == 0 ? '自发订单' : '代发订单'),
    },
  ];

  const a = [
    {
      title: '回传失败原因',
      code: 'backflowFailCause',
      width: 150,
    },
  ];

  const b = [
    {
      title: '回传时间',
      code: 'backflowTime',
      width: 170,
    },
  ];

  const getClums = () => {
    if (type == 2) {
      return [...columns, ...b, ...a];
    } else if (type == 0) {
      return columns;
    } else {
      return [...columns, ...b];
    }
  };

  const extraHeight = type == '0' ? headerHeight + 230 : headerHeight + 270;

  //表格组件
  const TableRenderProps = {
    data,
    rowKey: 'id',
    columns: getClums(),
    style: {
      height: `calc(100vh - ${extraHeight}px)`
    },
    checkOption: type == '0' ? null : {
      value: rowKey,
      onChange(val) {
        const arr = data.filter(v => val.includes(v.id)).map(v => {
          return {
            id: v.id,
            storeId: v.storeId,
          }
        })
        setRowKey(val);
        setSelectedRowData(arr);
      }
    },
    pageConfig: {
      pages,
      handlePageSize(page, size) {
        setPages({
          ...pages,
          current: page,
          pageSize: size
        });
      }
    }
  }

  //操作按钮
  const btnArr = [
    { elType: 'button', text: '重新上传', onClick: againClick },
    { elType: 'button', text: '取消上传', onClick: cancelClick },
  ]

  return (
    <div className='global-page-wrap'>
      {type == '2' && <OperaBtnRender style={{ marginBottom: '12px' }} btnArr={btnArr} />}
      <TableRender {...TableRenderProps} />
    </div>
    // <div className={styles.tableStyle}>
    //   <div style={{ margin: '16px 0px 12px 0px' }}>{getBtn()}</div>
    //   <CommonTable {...TableProps} />
    // 	<CommonLoading loading={loading} />
    // </div>
  );
};
